<template>
  <div>
    <div class="fun-btn">
      <el-button @click="handleTransfer" type="primary" size="small">移交</el-button>

      <div class="head-search">
        <search @onSubmit="onSearch">
          <el-form-item>
            <el-input placeholder="请输入内容"
                      v-model="searchData.val"
                      size="small"
                      clearable
                      class="input-with-select">
              <el-select v-model="searchData.select" clearable slot="prepend" placeholder="请选择">
                <el-option v-for="(item, index) in searchOptions"
                           :key="index"
                           :label="item.mdName"
                           :value="item.mdCode"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </search>
        <el-button type="primary" size="small" @click="handleShowSenior">高级查询</el-button>
      </div>

    </div>
    <div class="list-box">
      <el-table
        :data="tableData"
        border
        v-loading="tableLoading"
        height="calc(100vh - 265px)"
        @row-dblclick="handlerRowDblClick"
        @selection-change="handleSelectionChange"
        class="table">
        <el-table-column
          align="center"
          type="index"
          fixed="left"
          label="序号"
          width="60">
        </el-table-column>
        <!--:sortable="item.sort"-->
        <el-table-column
          v-for="(item, index) in headTableList"
          :key="index"
          show-overflow-tooltip
          :prop="item.mdCode"
          :label="item.mdName"
          :min-width="item.width"
          :align="item.mdCode === 'tm' ? 'left' : 'center'"
        >
        </el-table-column>

      </el-table>
      <el-pagination
        v-if="pageTotal>0"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>

    <el-drawer
      :title="setDrawer.title"
      :size="setDrawer.size"
      :direction="setDrawer.direction"
      :visible.sync="drawer"
      :destroy-on-close="true"
    >
      <senior-search-export :idTable="idTable"
                            :idCategory="idCategory"
                            :qzDataSelect="qzDataSelect"
                            @handleSenior="handleSenior"></senior-search-export>
    </el-drawer>

    <el-dialog :title="dialog.dialogTitle"
               :width="dialog.dialogWidth"
               top="5vh"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="dialog.dialogVisible">
      <el-form :model="exportForm"
               ref="ruleForm"
               :rules="rules"
               label-width="130px"
               class="demo-ruleForm">
        <el-form-item label-width="0" prop="describe">
          <div><span style="color: red">*</span> 移交档案名称：</div>
          <el-input size="small"
                    type="textarea"
                    placeholder="请输入需创建的项目名称  如：2021年文书简化档案"
                    :autosize="{ minRows: 3, maxRows: 6}"
                    v-model="exportForm.describe">
          </el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <div>移交档案备注：</div>
          <el-input size="small"
                    type="textarea"
                    placeholder="请填写备注  如：2021年第十次导入"
                    :autosize="{ minRows: 3, maxRows: 6}"
                    v-model="exportForm.remark">
          </el-input>
        </el-form-item>
        <el-form-item label="移交用户：" style="margin-bottom: 0">
          <span>{{userInfo.userName || ''}}</span>
        </el-form-item>
        <el-form-item label="生成时间：" style="margin-bottom: 0">
          <span>{{generateTime}}</span>
        </el-form-item>
        <el-form-item label="移交档案数量：">
          <div>{{archivesNum[0]}}</div>
          <div>{{archivesNum[1]}}</div>
        </el-form-item>

        <el-form-item>
          <div class="text-right">
            <el-button :loading="subLoading" size="small" @click="dialog.dialogVisible = false">取消</el-button>
            <el-button :loading="subLoading" size="small" type="primary" @click="handleSubAdd">生成移交资源</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import Search from '../../../../components/search/search'
import { mapFields } from 'vuex-map-fields'
import { mapActions } from 'vuex'
import SeniorSearchExport from './seniorSearchExport'
import { getQzDic } from '../../../../api/quanzong/quanzong'
import { getToday } from '../../../../util/util'
import { addDataExportList, numDataExportList } from '../../../../api/dataManage/dataExport'

export default {
  name: 'dataList', // 数据列表
  components: {
    SeniorSearchExport,
    Search
  },
  props: {
    idTable: {
      type: String
    },
    idCategory: {
      type: String
    }
  },
  // 数据列表
  data () {
    return {
      drawer: false,
      setDrawer: {
        title: '',
        size: '',
        direction: 'ltr'
      },
      dialog: {
        dialogTitle: '',
        dialogWidth: '',
        dialogVisible: false
      },
      searchData: {
        select: '',
        val: ''
      },
      page: {
        pageNo: 1,
        pageSize: 20
      },
      params: [],
      selectedChange: [], // 选中的数据
      qzDataSelect: [], // 全宗号下拉框
      subLoading: false,
      exportForm: {
        describe: '',
        remark: ''
      },
      archivesNum: '',
      rules: {
        describe: [
          {
            required: true,
            message: '请输入创建导入项目',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    this.getSearch()
    getQzDic({
      pageNo: 1,
      pageSize: 1000
    }).then(res => {
      this.qzDataSelect = res.data.data.list
    })
  },
  computed: {
    ...mapFields('profile/profile', {
      userInfo: 'retrieved'
    }),
    ...mapFields('electronicsFile/getHead', {
      sortRetrieved: 'sortRetrieved',
      headTable: 'retrieved',
      listTable: 'listRetrieved',
      tableLoading: 'loading'
    }),
    ...mapFields('electronicsFile/getSearch', {
      searchOptions: 'retrieved'
    }),
    ...mapFields('electronicsFile/setSearchCondition', {
      searchParams: 'retrieved'
    }),
    headTableList () {
      return this.headTable ? this.headTable : []
    },
    tableData () {
      return this.listTable ? this.listTable.records : []
    },
    pageTotal () {
      return this.listTable ? Number(this.listTable.total) : 0
    },
    generateTime () {
      return getToday()
    }
  },
  methods: {
    ...mapActions('electronicsFile/getHead', ['getTableList']),
    ...mapActions('electronicsFile/getSearch', ['getSearchOptions']),
    async getSearch () {
      await this.getSearchOptions(this.idTable)
      this.searchData.select = this.searchOptions[0].mdCode
      this.searchOptions.map(item => {
        if (item.mdCode === 'tm') {
          this.searchData.select = 'tm'
        }
      })
    },
    getList () {
      // 获取
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        params: this.searchParams.concat(this.params)
      }
      this.getTableList({
        idTable: this.idTable,
        data: param
      })
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.pageNo = val
      this.getList()
    },
    onSearch () {
      this.page.pageNo = 1
      this.page.pageSize = 20
      this.params = []
      if (this.searchData.val) {
        this.params = [{
          name: this.searchData.select,
          op: 'like',
          value: this.searchData.val
        }]
      }
      this.getList()
    },
    handleShowSenior () {
      // 打开高级检索弹窗
      this.drawer = true
      this.setDrawer.title = '高级检索'
      this.setDrawer.size = '50%'
      this.setDrawer.direction = 'rtl'
    },
    handleSenior () {
      // 高级检索关闭
      this.drawer = false
    },
    handlerRowDblClick (row) {
      // 双击查看详情
      console.log(row)
    },
    handleSelectionChange (list) {
      // 勾选的列表数据
      this.selectedChange = list
    },
    handleTransfer () {
      // 移交打开弹窗
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        params: this.searchParams.concat(this.params)
      }
      numDataExportList(this.idCategory, param).then(res => {
        // 根据检索条件查询移交档案数量
        this.archivesNum = res.data.data.split('\n')
      })
      this.dialog.dialogTitle = '新建导出项目'
      this.dialog.dialogWidth = '500px'
      this.dialog.dialogVisible = true
    },
    handleSubAdd () {
      // 新建导出项目
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$set(this.exportForm, 'idCategory', this.idCategory)
          this.$set(this.exportForm, 'pageNo', this.page.pageNo)
          this.$set(this.exportForm, 'pageSize', this.page.pageSize)
          this.$set(this.exportForm, 'params', this.searchParams.concat(this.params))

          this.subLoading = true
          addDataExportList(this.exportForm).then(res => {
            this.onLoad()
            this.subLoading = false
          }).catch(() => {
            this.subLoading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .fun-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .head-search {
      position: relative;
      top: 10px
    }
  }

  .list-box {
    .table {
      height: calc(100vh - 230px);
    }
  }
</style>
